<template>
    <div class="edit-rec">
        <!-- 标题组件 -->
        <title-comp>编辑推荐</title-comp>
        
        <div class="list" v-if="!isLoading">
            <ul>
                <li v-for="(item,i) in songs">
                    <router-link :to="`/songlist?id=${item.id}&name=${item.name}`">
                        <!-- 图片盒子 -->
                        <div class="item-box">
                            <div class="item-box-img">
                                <!-- <img :src="item.picUrl" alt=""> -->
                                <loading-image :pic="item.picUrl"></loading-image>
                                <div>
                                    <i></i>
                                    <span>{{item.playCount |  counts}}万</span>
                                </div>
                            </div>
                            <div class="item-box-title">
                                <p>{{ item.name }}</p>
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
        <loading-comp v-if="isLoading"></loading-comp>
    </div>
</template>

<style lang="scss">
@import '../static/style/variable.scss';
.edit-rec {
    width: 100%;
    .list {
        width: 100%;
        ul {
            width: 100%;
            // 网格布局
            display: grid;
            // 设置多少行 行高度
            grid-template-rows: repeat(2, 4.5867rem);
            // 设置多少列 列尺寸
            grid-template-columns: repeat(3, 1fr);

            li {
                background-color: #fff;
                &:nth-child(3), 
                &:nth-child(6) {
                    .item-box-img {
                        padding-right: 0;
                    }
                }
            }

            a {
                display: block;
                background-color: #fff;
            }
        }

        .item-box-img {
            width: 100%;
            height: 100%;
            padding-right: .0533rem;
            padding-bottom: 0;
            box-sizing: border-box;
            position: relative;
            // border: 1px solid #ccc;
            background-color: #ccc;
            box-shadow: 0 0 2px #ccc;
            border-radius: .1333rem;

            // img 是行内块元素  （去掉行内块元素的文本空白的方式）
            img {
                width: 100%;
                display: block;
            }

            div {
                position: absolute;
                top: .1rem;
                right: .2rem;
                color: #fff;
                font-size: .32rem;

                i {
                    display: inline-block;
                    width: .32rem;
                    height: .32rem;
                    // background-color: red;
                    background-image: url(../static/images/icon1.svg);
                    background-size: cover;
                    vertical-align: middle;
                }

                span {
                    vertical-align: middle;
                }
            }
        }

        .item-box-title {
            p {
                padding: .0533rem  .16rem;
                font-size: 14px;
                width: 100%;
                box-sizing: border-box;
                // 超出盒子的文本变省略号
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
            }
        }
    }
}
</style>

<script>
import TitleComp from '@/components/title-comp.vue';
import LoadingComp from '@/components/loading-comp.vue';
import { personalizedSong } from '@/request'
import LoadingImage from '@/components/loading-image.vue';
export default {
    name: 'edit-recommend',
    components: {TitleComp , LoadingComp,LoadingImage},
    data() {
        return {
            // webpack环境 不能直接解析图片，需要require
            // xxxx: require('@/static/images/1.jpg'),
            // 记录推荐歌单数据
            songs: [],
            isLoading: true,
        }
    },
    filters: {
        // 以万为单位
        counts(value){
            return ((value - 0) / 10000).toFixed(2);
        }
    },
    created(){
        // 初始化页面 (最多30条数据)
        this.getPersonalizedSong(6);
    },
    methods: {
        // 获取推荐歌单
        getPersonalizedSong(num){
            this.isLoading = true;
            let d = null;
            // limit: 获取的数量
            personalizedSong({limit: num})
            .then(data=>{
                // console.log(data);
                if(data.code == 200){
                    let {result} = data;
                    // 整合数据
                    let arr = result.map((item)=>{
                        let obj = {};
                        obj.id = item.id;
                        obj.name = item.name;
                        obj.picUrl = item.picUrl;
                        obj.playCount = item.playCount;
                        obj.type = item.type;
                        obj.alg = item.alg;
                        obj.type = item.type;
                        return obj;
                    })
                    // 给数组赋值
                    d = setTimeout(()=>{
                        this.songs = arr;
                        this.isLoading = false;
                        clearTimeout(d);
                    },300)
                }
            })
            .catch(
                err=> {
                    // 隐藏正在加载提示
                    this.isLoading = false;
                }
            )
        }
    }
}
</script>